<template>
    <el-card class="box-card" style="margin:10px 0px">
        <div slot="header" class="clearfix">
            <!-- 头部左侧内容 -->
            <el-tabs class="tab" v-model="activeName">
                <el-tab-pane label="销售额" name="销售额" ></el-tab-pane>
                <el-tab-pane label="访问量" name="访问量"></el-tab-pane>
            </el-tabs>
            <!-- 头部右侧内容 -->
            <div class="right">
                <span @click="setDay">今日</span>
                <span @click="setWeek">本周</span>
                <span @click="setMonth">本月</span>
                <span @click="setYear">本年</span>
                <el-date-picker
                    class="date"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    size="mini"
                    v-model="date"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
            </div>
        </div>
        <div>
            <el-row :gutter="10">
                <el-col :span="18">
                    <div class="charts" ref="charts"></div>
                </el-col>
                <el-col :span="6" class="right">
                    <h3>门店{{title}}排名</h3>
                    <ul>
                        <li>
                            <span class="rindex1">1</span>
                            <span>python</span>
                            <span class="rvalue">103211</span>
                        </li>
                        <li>
                            <span class="rindex1">2</span>
                            <span>java</span>
                            <span class="rvalue">42333</span>
                        </li>
                        <li>
                            <span class="rindex1">3</span>
                            <span>C</span>
                            <span class="rvalue">13211</span>
                        </li>
                        <li>
                            <span class="rindex2">4</span>
                            <span>javascript</span>
                            <span class="rvalue">1211</span>
                        </li>
                        <li>
                            <span class="rindex2">5</span>
                            <span>php</span>
                            <span class="rvalue">1121</span>
                        </li>
                        <li>
                            <span class="rindex2">6</span>
                            <span>R</span>
                            <span class="rvalue">1032</span>
                        </li>
                        
                    </ul>
                </el-col>
            </el-row>
        </div>
    </el-card>
</template>

<script>
import * as echarts from 'echarts'
import dayjs from 'dayjs';
export default {
    name:"",
    data(){
        return{
            activeName:'销售额',
            mCharts:null,
            date:[]
        }
    },
    mounted(){
        this.mCharts = echarts.init(this.$refs.charts);
        this.mCharts.setOption({
            title:{text:this.title+"趋势"},
            xAxis:{type:"category",data:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]},
            yAxis:{},
            tooltip:{
                trigger:"axis",
                axisPointer:{
                    type:"shadow",
                }
            },
            gird:{
                left:"3%",
                top:"4%",
                right:"3%",
                containLabel:true,
            },
            series:[{
                type:"bar",
                name:"数据",
                barWidth:"60%",
                data:[45,74,12,42,12,51,13,34,20,45,12,12],
                color:"yellowgreen",
            },]
        })
    },
    computed:{
        // 计算属性-标题
        title(){
            return this.activeName=='销售额'?'销售额':'访问量'
        },
    },
    // 监听属性
    watch:{
        // 图表配置数据可以再次修改，如果有新的数值，就返回新的数值，没有用的还是之前的数据
        title(){
            // 重新修改图表配置的数据
            this.mCharts.setOption({
                title:{
                    text:this.title+"趋势"
                },
                series:[{
                    type:"bar",
                    name:"数据",
                    barWidth:"60%",
                    color:this.title=="销售额"?"yellowgreen":"#49a3e2",
                    data:this.title=="销售额"?[45,74,12,42,12,51,13,34,20,45,12,12]:[20,45,12,51,12,45,74,12,42,13,34,12]
                },]
            });
            
        }
    },
    methods:{
        setDay(){
            // 本天
            const day = dayjs().format("YYYY-MM-DD");
            this.date = [day,day];
        },
        setWeek(){
            // 本周
            const start = dayjs().day(1).format("YYYY-MM-DD");
            const end = dayjs().day(7).format("YYYY-MM-DD"); 
            this.date = [start,end];
        },
        setMonth(){
            // 本月
            const start = dayjs().startOf('month').format("YYYY-MM-DD");
            const end = dayjs().endOf("month").format("YYYY-MM-DD"); 
            this.date = [start,end];
        },
        setYear(){
            // 本年
            const start = dayjs().startOf("year").format("YYYY-MM-DD");
            const end = dayjs().endOf("year").format("YYYY-MM-DD");
            this.date = [start ,end];
        }
    }
}
</script>

<style scoped>
.clearfix{
    display:flex;
    justify-content:space-between;
    position:relative;
}
.tab{
    width:100%;
}
.right{
    position:absolute;
    right:0px;
}
.right span{
    margin:0px 10px;
}
.date{
    width:200px;
    margin:0px 20px;
}
.charts{
    width:100%;
    height:300px;
}
ul {
    list-style:none;
    width:100%;
    height:300px;
    padding:0px;
}
ul li{
    height:8%;
    margin:10px 0px;
}
.rindex1{
    float:left;
    width:20px;
    height:20px;
    border-radius:50%;
    background:black;
    color:white;
    text-align:center;
}
.rindex2{
    float:left;
    width:20px;
    height:20px;
    border-radius:50%;
    background:white;
    color:black;
    text-align:center;
}
.rvalue{
    float:right;
}
</style>